import React from 'react';
import styles from '@/assets/css/detail.module.css';
import type comment from '@/types/comment';
import type room from '@/types/room';


export default function Comment()
{

    const [SearchParams] = useSearchParams();

    const [roomid] = useState<string|null>(SearchParams.get('roomid') ? SearchParams.get('roomid') : '');
    const [info,SetInfo] = useState<room>({} as room);
    const [CommentData,SetCommentData] = useState<comment[]>([]);

    console.log(info);

    const GetInfoData = async () =>
        {
            const params = {
                roomid
            }
            // console.log(params);
    
            const result = await React.http.post('/room/comment',params);
    
            if(result.code === 1)
            {
                SetInfo(result.data.info);
                SetCommentData(result.data.CommentData);
            }else{
               React.fail(result.msg);
            }
        }

        useEffect(() =>
        {
            GetInfoData();
        },[roomid]);

    return (
        <>
        <div className={styles.detail_top}>
        <div id="comment" className={styles.comment}>
            <div className={styles.title}>评价</div>
            <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                {CommentData.length > 0 && CommentData.map((item: comment) => (
                    <div className={styles.rate_list_item} key={item.id}>
                        <div className={styles.item_content}>
                            <div className={styles.content_prefix}>
                                <div className={styles.ratelist}>
                                    <div className={styles.image}>
                                        <img src={item.business.avatar_cdn} alt="" />
                                    </div>
                                    <p className={styles.nickname}>{item.business.nickname}</p>
                                </div>
                            </div>
                            <div className={styles.content_main}>
                                <div className={styles.rate}>
                                    <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                </div>
                                <div className={styles.item_description}>
                                    <p>{item.content}</p>
                                    <p className={styles.item_time}>{item.createtime_text}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </React.UI.List>
        </div>
        </div>
        </>
    )
}